<link href="/css/rateit.css" rel="stylesheet" type="text/css">
<?$count=count($this->list)?>
<?if (isset($this->nick)&&isset($this->comment)&&isset($this->value)):?>
        <?echo $this->nick." ".$this->comment." ".$this->value?>
<?endif?>
<h2 class="comments">Comments: </h2>
    <?if ($count!=0):?>
<!--        Totaly rank: --><?//=$this->list[0]['suma'][0]['suma']/$count?>
<!--        --><?//print_r($this->list); die;?>
        <ol class="allcomments">
        <?foreach ($this->list as $onecomment):?>
         <li>
               <p class="sayit"> <span> <?=$onecomment['nick']?></span> say:</p>


                 <div class="borderrank">
                  <table class="zeropadding">
                              <tr>
                                  <td>Price:</td><td><div class="rateit" data-rateit-value="<?=$onecomment['price']?>" data-rateit-readonly="true"></div></td>

                                </tr>

                                <tr>
                                  <td>Quality:</td><td><div class="rateit" data-rateit-value="<?=$onecomment['quality']?>" data-rateit-readonly="true"></div></td>

                                </tr>

                                <tr>
                                   <td>Responsiveness:</td><td><div class="rateit" data-rateit-value="<?=$onecomment['responsiveness']?>" data-rateit-readonly="true"></div>
                                  </td>

                                </tr>

                                <tr>
                                  <td>Punctuality:</td><td><div class="rateit" data-rateit-value="<?=$onecomment['punctuality']?>" data-rateit-readonly="true"></div>
                               </td>

                                </tr>

                              <tr>
                                  <td>Professionalism:</td><td><div class="rateit" data-rateit-value="<?=$onecomment['professionalism']?>" data-rateit-readonly="true"></div>
                                 </td>

                                </tr>

                  </table>
                  </div>

              <div class="commment"> <?=$onecomment['comment']?></div>

          </li>
        <?endforeach;?>
        </ol>
<div class="new"></div>
    <?else:?>
       <?echo "There is no one comment"?>
    <?endif?>
<div class="status">Comment was added! Refresh page to see it.</div>
<h3 class="addcomments">Add comment:</h3>

               <form class="addcpersoncom forreviews" method="post" action="">
              <div class="otstup">  <label for="Nick">Nickname:</label><input type="text" name="Nick" id="Nick" placeholder="Your nick"></div>
               <div class="otstup"> <span style="vertical-align: top"><label>Comment:</label></span><textarea name="Comment" id="Comment" cols="30" rows="10" placeholder="Your comment" ></textarea></div>
               <div class="otstup">
                       <table class="forrank">
                        <tr>
                            <td><label>Price:</label></td>
                            <td><div  class="rateit" id="r1" name="price" ></div></td>
                        </tr>
                        <tr>
                            <td><label>Quality:</label></td>
                            <td><div  class="rateit" id="r2" name="qual" ></div></td>
                        </tr>
                        <tr>
                            <td><label>Responsiveness:</label></td>
                            <td><div  class="rateit" id="r3" name="respons" ></div></td>
                        </tr>
                         <tr>
                             <td><label>Punctuality:</label></td>
                             <td><div  class="rateit" id="r4" name="punct" ></div></td>
                         </tr>
                         <tr>
                             <td><label>Professionalism:</label></td>
                            <td><div  class="rateit" id="r5" name="prof"></div></td>
                         </tr>
                         
                         </table>
                </div>
                  <div style="text-align: right;   width: 415px;"><input type="button" class="OK" value="Add"></div>
                    </form>
                        

        

            <script type="text/javascript">



                $(document).ready(function(){

                    $('.OK').click(validateComment);
                  

                });

                function displayLoading() {
                    $('#wrap_loading').toggle();
                    
                }


                function validateComment (){
                     var r1 = $('#r1');
                     var r2 = $('#r2');
                     var r3 = $('#r3');
                     var r4= $('#r4');
                     var r5 = $('#r5');
                //we bind only to the rateit controls within the products div
                 var price = r1.rateit('value');
                 var quality = r2.rateit('value');
                 var responsiveness = r3.rateit('value');
                 var punctuality = r4.rateit('value');
                 var professionalism = r5.rateit('value');
                 var nickname=$('#Nick').val();
                 var comment=$('#Comment').val();

                    if ((nickname.length!=0)&&(comment.length!=0)&&(price!=0)&&(quality!=0)&&(responsiveness!=0)&&(punctuality!=0)&&(professionalism!=0))
                    {

                        addComment(nickname,comment,price,quality,responsiveness,punctuality,professionalism);


                    }
                   else $('.status').css('display','block').css('color','red').html('Please fill 2 fields and put your rank!');
                }

                function addComment(nickname, comment,price,quality,responsiveness,punctuality,professionalism){

                    $.ajax({
                                    url: '/reviews', //your server side script
                                    data: {
                                        nickname: nickname,
                                        comment: comment,
                                        price: price,
                                        quality: quality,
                                        responsiveness: responsiveness,
                                        punctuality:punctuality,
                                        professionalism:professionalism
                                    }, //our data
                                    type: 'POST',
                                    beforeSend: function(){displayLoading();},
                                    success: function (jxhr, msg, err) {
                                        $('.status').css('display','block').css('color','green').html('Comment was added!');
                                       refreshComments(jxhr);
                                       displayLoading();
                                       $('.OK').attr('disabled','disabled');

                                    },
                                     error: function (jxhr, msg, err) {

                                        $('.status').css('display','block').css('color','red').html(msg);
                                    }


                        });

                }
                    function  refreshComments(jxhr)
                    {
//                        console.log(jxhr[0]);
               
                         $('.allcomments').append(
                         "<li><p class='sayit'> <span>"+ jxhr[0]['nick'] + "</span> say:</p> "
                         +"<div class='borderrank'><table class='zeropadding'>"
                         +"<tr><td>Price</td><td><div class='rateit' id='rat1' data-rateit-readonly='true' data-rateit-value='"+jxhr[0]['price']+"'></div></td>"
                         +"<tr><td>Quality</td><td><div class='rateit' id='rat2' data-rateit-readonly='true' data-rateit-value='"+jxhr[0]['quality']+"'></div></td>"
                         +"<tr><td>Responsiveness</td><td><div class='rateit' id='rat3' data-rateit-readonly='true' data-rateit-value='"+jxhr[0]['responsiveness']+"'></div></td>"
                         +"<tr><td>Punctuality</td><td><div class='rateit' id='rat4' data-rateit-readonly='true' data-rateit-value='"+jxhr[0]['punctuality']+"'></div></td>"
                         +"<tr><td>Professionalism</td><td><div class='rateit' id='rat5' data-rateit-readonly='true' data-rateit-value='"+jxhr[0]['professionalism']+"'></div></td>"
                         +"</table></div>"
                                 +" <div class='commment'>"+jxhr[0]['comment']+"</div></li>"
                         );

                        
                        $('div.#rat1').rateit();
                        $('div.#rat2').rateit();
                        $('div.#rat3').rateit();
                        $('div.#rat4').rateit();
                        $('div.#rat5').rateit();

                        


                    }

               
            </script>




    <script src="/js/jquery.rateit.min.js" type="text/javascript"></script>